<template>

    <div class="bg">
        <swiper ref="mySwiper" :options="swiperOptions1">
            <swiper-slide v-for="(items,index) in page" :key="index" class="icons">
                <div class="icons-item" v-for="item in items" :key="item.id">
                    <img :src="item.imgUrl">
                    <p>{{item.title}}</p>
                </div> 
            </swiper-slide>
            <div class="swiper-pagination bcgreen" slot="pagination"></div>
        </swiper>         
    </div>
</template>

<script>
export default {
    data(){
        return {
            swiperOptions1:{
            pagination: {
                 el: '.swiper-pagination',
             },
            loop:true,  
            },
           
            
        }
    },
    props:['iconsList'],
    computed:{
        page(){
            let pages = []
            this.iconsList.forEach((item,index)=>{
                let idx = Math.floor(index/8)
                if(!pages[idx]){
                    pages[idx] = []
                }
                pages[idx].push(item)
            })
            return pages
        }
    }
}
</script>

<style scoped>
.bg{
background-color: #fff;
}
    .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
        
    }
    .icons .icons-item{
        text-align: center;
        width: 25%;
        font-size: 14px;
        margin: 5px 0px;
    }
    .icons .icons-item img{
        width: 40px;
        height: 40px;
    }
    
</style>